<template>
  <view class="user-box flex flex-col page-content">
    <!-- <view class="user flex flex-col justify-center items-center" v-if="isDoLogin">
      <div class="total">{{ userInfo.integral }}</div>
      <div class="des">我的积分</div>
    </view>
    <view class="user flex items-center" v-else>
      <view>立即登录</view>
      <button open-type="getUserInfo" bindgetuserinfo="login">授权登录</button>
    </view> -->
    <view class="user-info" v-if="isLogin">
      <van-row gutter="10" align="center">
        <van-col span="6">
          <van-image
            width="80"
            height="80"
            round
            fit="cover"
            src="https://unpkg.com/@vant/assets/cat.jpeg"
          />
        </van-col>
      </van-row>
    </view>
    <view class="user-info" v-else>
      <van-row gutter="10" align="center">
        <van-col span="6">
          <van-image
            width="80"
            height="80"
            round
            fit="cover"
            src="https://unpkg.com/@vant/assets/cat.jpeg"
          />
        </van-col>
        <van-col span="8" @click="startLogin">立即登录</van-col>
      </van-row>
    </view>

    <view class="user-menu-list">
      <van-cell title="我的积分" value="积分" />
      <van-cell title="授权密钥" is-link value="密钥为唯一标志，获取后请记录" @click="getMiYao" />
    </view>

    <view class="fuli-box">
      <van-tabs v-model:active="active">
        <van-tab title="奖品记录">
          <van-list
            v-model:loading="loading"
            :finished="finished"
            finished-text="没有更多了"
            @load="onLoad"
          >
            <van-cell v-for="item in list" :key="item" :title="item">
              <view>
                <view>123</view>
                <view>加载数据{{ item }}</view>
              </view>
            </van-cell>
          </van-list>
        </van-tab>
        <!-- <van-tab title="福利记录">福利记录</van-tab> -->
      </van-tabs>
    </view>

    <!-- 拍品 -->
    <!-- <view class="flex-1 box">
		
		<scroll-view scroll-y class="points content-box" qq:if="{{tabIndex===0}}">
			<view qq:if="{{prizeRecord.length > 0}}">
				<view class="item flex justify-between" qq:for="{{prizeRecord}}" qq:key="index">
					<view class="l">{{item.prizeName}} {{item.prizeVal}}</view>
					<view class="r">{{item.createTime}}</view>123
				</view>
			</view>
			<view class="item flex" qq:else>
				<view>暂无数据</view>
			</view>
		</scroll-view>
		<scroll-view scroll-y class="lots content-box" qq:if="{{tabIndex===1}}">
			<view class="item flex">
				
				<view>暂无数据</view>
			</view>
		</scroll-view>
		
	</view> -->

    <!-- 密钥生成弹框-->
    <van-dialog
      v-model:show="miyaoshow"
      title="密钥是唯一标识请复制并截图保存"
      :message="miyao"
      confirm-button-text="复制"
      @click="copyText"
    >
    </van-dialog>

    <!-- 登录弹框-->
    <van-dialog
      v-model:show="loginShow"
      title="登录"
      confirm-button-text="登录"
      show-cancel-button="true"
      @confirm="login"
      @cancel="cancelLogin"
    >
      <van-cell-group inset>
        <van-field v-model="miyao" center clearable placeholder="请输入密钥">
          <template #button>
            <van-button size="small" type="primary" @click="loginGenerateKey">生成</van-button>
          </template>
        </van-field>
      </van-cell-group>
    </van-dialog>
  </view>
</template>

<script lang="ts">
import { Form, Field, Cell, CellGroup } from 'vant'
import { Tab, Tabs } from 'vant'
import { ref } from 'vue'
import { List } from 'vant'
import { getH5Code, registOrLogin, getUserInfo } from '@/api/user'
import { showToast } from 'vant' //引入showToast
import { showDialog } from 'vant' //引入showToast
export default {
  name: 'home',
  components: {
    [CellGroup.name]: CellGroup,
    [Cell.name]: Cell,
    [Tabs.name]: Tabs,
    [Tab.name]: Tab,
    [List.name]: List
  },
  data() {
    return {
      userInfo: {},
      hasUserInfo: false,
      isDoLogin: false,
      tabIndex: 0,
      active: 0,
      list: [],
      loading: false,
      finished: false,
      miyao: '',
      miyaoshow: false,
      loginShow: false
    }
  },
  mounted() {},
  methods: {
    onLoad() {
      this.isLogin = null != this.$getToken()
    },
    getMiYao() {
      let _ = this
      getH5Code({})
        .then((res) => {
          _.miyao = res
          _.miyaoshow = true
        })
        .catch((err) => {
          //取消请求后会执行该方法
          console.log(err)
        })
    },
    async copyText() {
      try {
        await navigator.clipboard.writeText(this.miyao)
        showToast('复制成功')
        this.miyaoshow = false
      } catch (error) {
        showToast('复制失败')
        console.error('复制失败', error)
        this.miyaoshow = false
      }
    },
    loginGenerateKey() {
      this.getMiYao()
    },
    login() {
      let _ = this
      registOrLogin({ code: this.miyao })
        .then((res) => {
          _.$setToken(res.accessToken)
        })
        .catch((err) => {
          //取消请求后会执行该方法
          console.log(err)
        })
    },
    cancelLogin() {
      this.loginShow = false
    },
    startLogin() {
      this.loginShow = true
    }
  }
}
</script>

<style scoped>
.user-box {
  padding: 20px;
}
.user {
  width: 750px;
  height: 300px;
  background: #ededed;
  color: #b7a26c;
}
.user .total {
  font-size: 80px;
  font-weight: 700;
}
.user-info {
}

.user-menu-list {
  margin-top: 20px;
  border-radius: 10px;
}

.fuli-box {
  margin-top: 20px;
  border-radius: 10px;
}
</style>
